<template>
  <div class="background">
    <titleComponent :index="0" :originName="'energy'"></titleComponent>
    <div class="content">
      <!-- 左边 -->
      <div class="content_info">
        <div class="yz-select-server">
          <!-- 下拉框 -->
          <div class="block_select_contain">
            <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
                         @change="serverHandleChange" v-model="curServer" filterable clearable></el-cascader>
          </div>
          <div class="yz-box-items"> 
            <div class="yz-box-item" v-for="(item,index) in abItems" @click="abClick(index)">
              <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected">{{item.name}}</div>
              <div v-else class="yz-box-item-text">{{item.name}}</div>
            </div>
          </div>
          <div class="yz-box-items">
            <div class="yz-box-item" v-for="(item,index) in dmyItems" @click="dmyClick(index)">
              <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected">{{item.name}}</div>
              <div v-else class="yz-box-item-text">{{item.name}}</div>
            </div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'水电费用同期对比'" />
          <div class="yz-content-bg">
            <div ref="ydsdfyRef" class="chart"></div>
          </div>
        </div>

        <div class="content_info_item">
          <contentTitle :title="'服务区能耗排行'"/>
          <div class="yz-content-bg">
            <div class="elsie-search" style="top:10px">
              <div class="elsie-search-type">
                <div v-for="(item,index) in ysydTab" @click="ysydTabClick(index)" class="elsie-search-item">
                  <div :class="item.clazz">{{item.title}}</div>
                </div>
              </div>
            </div>
            <div class="chart" ref="ysydlRef" style="margin-top: 12px;margin-left: 0px;"></div>
          </div>
        </div>

        <div class="content_info_item">
          <contentTitle :title="'车客流与能耗收入对比'"/>
          <div class="yz-content-bg">
            <div class="chart" ref="clklnhRef"></div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="content_map">
        <div class="yz-map-header">
          <div class="car_flow numbg">
            <div class="yz-box-item-colums">
              <div class="yz-box-item-colum" v-for="(item,index) in bennianyingshouOptions" @click="zoneClick(index)">
                <div class="yx-li yx-li-select" v-if="item.selected">{{item.name}}</div>
                <div class="yx-li" v-else>{{item.name}}</div>
              </div>
            </div>
            <div class="car_flow_text">{{ currentBennianyingshouOptions.text }}</div>
            <div class="car_flow_num">
              <div class="perNum" v-for="(item,index) in currentBennianyingshouOptions.num">
                <div v-if="isNumeric(item)">
                  <!-- 有背景图，然后把数字拆分  -->
                  <countTo :startVal='0' :endVal='item||0' :duration='5000'></countTo>
                </div>
                <div v-else>
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="car_flow_unit">万元</div>
          </div>
        </div>
        <!-- 地图数据 -->
        <Map-traffic :data="mapData.data" :showLabel="mapData.showLabel" :parenHandler="parenHandler"></Map-traffic>
      </div>
      <!-- 右边 -->
      <div class="content_info">
        <div class="yz-select-server">
          <div style="height: 3.5vh;"></div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'昨日能耗(接入服务区数量:8对)'"/>
          <div class="yz-content-bg">
            <div class="elsie-items-box elsie-items-box-4">
              <div class="elsie-items">
                <div class="elsie-item">
                  <div class="elsie-img-center">
                    <div class="elsie-water-l"></div>
                  </div>
                </div>
                <div class="elsie-item">
                  <div class="elsie-item-text">用水量</div>
                  <div class="elsie-item-num">{{ yesterday.w_value }}<span>吨</span></div>
                </div>
                <div class="elsie-item">
                  <div class="elsie-img-center">
                    <div class="elsie-water"></div>
                  </div>
                </div>
                <div class="elsie-item">
                  <div class="elsie-item-text">水费</div>
                  <div class="elsie-item-num">{{ yesterday.w_amount }}<span>万元</span></div>
                </div>
              </div>
              <div class="elsie-items">
                <div class="elsie-item">
                  <div class="elsie-img-center">
                    <div class="elsie-bridge-l"></div>
                  </div>
                </div>
                <div class="elsie-item">
                  <div class="elsie-item-text">用电量</div>
                  <div class="elsie-item-num">{{ yesterday.e_value }}<span>kwh</span></div>
                </div>
                <div class="elsie-item">
                  <div class="elsie-img-center">
                    <div class="elsie-water"></div>
                  </div>
                </div>
                <div class="elsie-item">
                  <div class="elsie-item-text">电费</div>
                  <div class="elsie-item-num">{{ yesterday.e_amount }}<span>万元</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'智能照明用电量(接入服务区数量:8对)'"/>
          <div class="yz-content-bg">
            <div class="elsie-search">
            </div>
            <div class="chart" ref="znzmydlRef"></div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'硬件概况(接入服务区数量:8对)'"/>
          <div class="yz-content-bg">
            <div class="elsie-items-box elsie-items-box-4-1">
              <div class="elsie-items">
                <div class="elsie-item">
                  <div class="elsie-img-center">
                    <div class="elsie-eler-o"></div>
                  </div>
                </div>
                <div class="elsie-item">
                  <div class="elsie-item-num">{{ hardWare.e_count }}</div>
                  <div class="elsie-item-text">电表设备</div>
                </div>
                <div class="elsie-item">
                  <div class="elsie-item-num">{{ hardWare.e_onlines }}</div>
                  <div class="elsie-item-text"><i class="dot green"></i> 在线</div>
                </div>
                <div class="elsie-item">
                  <div class="elsie-item-num">{{ hardWare.e_offlines }}</div>
                  <div class="elsie-item-text"><i class="dot red"></i> 离线</div>
                </div>
                <!-- <div class="elsie-item">
                  <div class="elsie-item-num">{{ hardWare.e_arrears }}</div>
                  <div class="elsie-item-text"><i class="dot yellow"></i> 欠费</div>
                </div> -->
              </div>
              <div class="elsie-items">
                <div class="elsie-item">
                  <div class="elsie-img-center">
                    <div class="elsie-water-o"></div>
                  </div>
                </div>
                <div class="elsie-item">
                  <div class="elsie-item-num">{{ hardWare.w_count }}</div>
                  <div class="elsie-item-text">水表设备</div>
                </div>
                <div class="elsie-item">
                  <div class="elsie-item-num">{{ hardWare.w_onlines }}</div>
                  <div class="elsie-item-text"><i class="dot green"></i> 在线</div>
                </div>
                <div class="elsie-item">
                  <div class="elsie-item-num">{{ hardWare.w_offlines }}</div>
                  <div class="elsie-item-text"><i class="dot red"></i> 离线</div>
                </div>
                <!-- <div class="elsie-item">
                  <div class="elsie-item-num">{{ hardWare.w_arrears }}</div>
                  <div class="elsie-item-text"><i class="dot yellow"></i> 欠费</div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <bottom-menu></bottom-menu>
</template>
<script setup>
import './../assets/content.css'
import titleComponent from "./components/title.vue"
import MapTraffic from "./components/mapTraffic.vue";
import BottomMenu from "./components/bottomMenu.vue";
import ContentTitle from "./components/contentTitle.vue";
import {CountTo} from "vue3-count-to";
import {ajaxRequest} from "../api/code.js";
import {getCurrentInstance, onMounted,reactive,watch, ref} from "vue";
import {drawLine} from "../util/chartUtil.js";
import { getMonthDays } from 'element-plus/es/components/calendar/src/date-table';
import black_symbol from '../assets/img/yztraffic/4.png';
import black_green from '../assets/img/yztraffic/3.png';
import black_coffic from '../assets/img/yztraffic/1.png';
import black_grey from '../assets/img/yztraffic/2.png';

const chart = getCurrentInstance().proxy.$echarts
const isNumeric = function (value){
  value = parseInt(value);
  return typeof value === 'number' && !isNaN(value);
}

/* 中间营收统计 */
const bennianyingshouOptions = ref([{name: '电费',selected:true}, {name: '水费',selected: false}])
const currentBennianyingshouOptions = ref({
  position : 0,
  text: bennianyingshouOptions.value[0].name,
  num: "0"
})
const zoneClick = function (selectIndex){
  bennianyingshouOptions.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
  // currentBennianyingshouOptions.value = {
  //   position : selectIndex,
  //   text : bennianyingshouOptions.value[selectIndex].name,
  //   num: parseInt(Math.random()*10000000) + ""
  // }
  getAmount()
}

/**初始化地图数据**/
const areacode = ref(null)


// 用水用电量
const ysydl_x = ref([
'肃宁服务区（东西区）',
'赵县服务区（东西区）',
'香河服务区（南北区）',
'辛集服务区（南北区）',
'石家庄南服务区（南北区）',
'吴桥服务区（东西区）',
'大名服务区（东西区）',
'石家庄东服务区（东西区）',
'沙河服务区（东西区）',
'漳河服务区（东西区）'
])
const ysydl_y = ref([ 15,13,12,11,10,9,8,7,6,5,4,3,2,1]);

const ysydlRef = ref();
const ysydlOpt = ref({
  grid: {
    top: '16%',
    left: '10%',
    right: '5%',
    bottom: '3%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      interval:0,
      rotate: 35,
      align: 'right',
      textStyle: {
        color: 'white',
        fontSize: 10
      }
    },
    data: ysydl_x.value
  },
  yAxis: {
    type: 'value',
    name: "万(元)",
    nameTextStyle: {
      color: "#FFF",
      nameLocation: "end",
      padding:[0,0,0,-15]
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(127, 127, 127, 1)',
        type: 'dashed',
      }
    },
    axisLabel: {
      interval:0,
      textStyle: {
        color: 'white',
        fontSize: 12
      }
    }
  },
  series: [
    {
      data: ysydl_y.value,
      type: 'bar',
      barWidth: 18,
      itemStyle: {
        borderRadius: [10, 10, 0, 0], // 这里设置圆角
        color: new chart.graphic.LinearGradient(
            0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
            [
              {offset: 0, color: '#029EE1'},   // 0% 处的颜色
              {offset: 1, color: 'rgba(136,243,241,0)'}   // 100% 处的颜色
            ]
        )
      }
    }
  ]
});

// const timeChange = function (){
//   for (let i = 1; i<=12;i++){
//     ysydlOpt.value.xAxis[0].data.push(i+'月');
//     ysydl_y.value.push(parseInt(Math.random()*1000+""));
//   }
// }
// timeChange();

const ysydTab = ref([{
  title: '用水',
  clazz: 'selected'
},{
  title: '用电',
  clazz: ''
}])

const ysydTimeTab = ref([
{
  title: '年',
  clazz: 'selected'
},{
  title: '月',
  clazz: ''
},
{
  title: '日',
  clazz: ''
}])

const ysydTabClick = function (selectIndex){
  ysydTab.value.forEach((row,index)=>{
    row.clazz = (index === selectIndex?'selected':'');
  });
  //TODO 这里执行用电/用水的逻辑
  getWtElctTop10()
}

const ysydTimeTabClick = function (selectIndex){
  ysydTimeTab.value.forEach((row,index)=>{
    row.clazz = (index === selectIndex?'selected':'');
  });
  //TODO 这里执行用电/用水的逻辑
}


//服务区能耗排行
const fwqnhphItem = ref([{
  fwq: '滦州服务区',
  cnt: '0.42',
  zb: '80%',
  ws: '100kwh'
},{
  fwq: '滦州服务区',
  cnt: '0.42',
  zb: '60%',
  ws: '100kwh'
},{
  fwq: '滦州服务区',
  cnt: '0.42',
  zb: '20%',
  ws: '100kwh'
},{
  fwq: '滦州服务区',
  cnt: '0.42',
  zb: '80%',
  ws: '100kwh'
},{
  fwq: '滦州服务区',
  cnt: '0.42',
  zb: '80%',
  ws: '100kwh'
}])

const fwqnhphTab = ref([{
  title: '用水',
  clazz: 'selected'
},{
  title: '用电',
  clazz: ''
}])

const fwqnhphTimeTab = ref([{
  title: '日',
  clazz: ''
},{
  title: '月',
  clazz: ''
},{
  title: '年',
  clazz: 'selected'
}])

const fwqnhphTabClick = function (selectIndex){
  fwqnhphTab.value.forEach((row,index)=>{
    row.clazz = (index === selectIndex?'selected':'');
  });
  getTops()
}

const fwqnhphTimeTabClick = function (selectIndex){
  fwqnhphTimeTab.value.forEach((row,index)=>{
    row.clazz = (index === selectIndex?'selected':'');
  });
  getTops()
}

//智能照明用电量
const znzmydl_x = ref([])
const znzmydl_y = ref([]);

const znzmydlRef = ref();
const znzmydlOpt = ref({
  color: ['#F44538'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  grid: {
    left: '5%',
    right: '5%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: znzmydl_x.value,
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'none' // 设置轴线颜色
        }
      },
      axisLabel: {
        interval:1,
        textStyle: {
          color: 'white',
          fontSize: 10
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: "Kwh",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,-35]
      },
      axisLabel: { // 设置轴标签样式
        textStyle: {
          color: 'white' // 设置轴标签颜色
        }
      },
      splitLine: { //网格线：隐藏
        show: false,
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed', // 线型为虚线
        }
      },
    }
  ],
  series: [
    {
      name: "智能照明用电量",
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 4
      },
      showSymbol: true,
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#F44538'
          },
          {
            offset: 1,
            color: 'rgb(229,10,10,0.1)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: znzmydl_y.value
    }
  ]
});


const znzmydlChange = function (){
  znzmydlOpt.value.xAxis[0].data = [];
  znzmydlOpt.value.series[0].data = [];
  if (dmyType.value=='year'){
    for (let i = 1; i<=12;i++){
      znzmydlOpt.value.xAxis[0].data.push(i+'月');
      znzmydlOpt.value.series[0].data.push(parseInt(Math.random()*1000+""));
    }
  }else {
    for (let i = 1; i<=30;i++){
      znzmydlOpt.value.xAxis[0].data.push(i+'日');
      znzmydlOpt.value.series[0].data.push(parseInt(Math.random()*1000+""));
    }
  }
  znzmydlChart.setOption(znzmydlOpt.value);
}

//////
//设置服务区下拉框值
const selectOptions = ref([{
  id: 24193,
  value: '河北高速燕赵驿行集团有限公司',
  label: '河北高速燕赵驿行集团有限公司',
  children: [{
    id: 349,
    value: '滦州服务区',
    label: '滦州服务区'
  }, {
    id: 0,
    value: '丰润停车区',
    label: '丰润停车区'
  }]
}])


async function getFwqxx() {
  selectOptions.value[0].children = []
  const result = await ajaxRequest('post', 'getFwqxx', {})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      selectOptions.value[0].children.push({id:item.id,value:item.id,label:item.compname})
    })
  }
}

getFwqxx();
const curServer = ref("")
//选中服务区
let compid=null;
const serverHandleChange = (selectItem) => {
  console.log(selectItem);
  curServer.value = selectItem;
  if(selectItem){
    compid = findIdByValue(selectItem[1])
  }else{
    compid=null
  }
  refreshData();
}
function findIdByValue(value) {  
  const options = selectOptions.value;  
  
  // 首先检查顶级选项  
  for (const option of options) {  
    if (option.value === value) {  
      return option.id;  
    }  
  
    // 然后检查子选项  
    for (const child of option.children) {  
      if (child.value === value) {  
        return child.id;  
      }  
    }  
  }  
  // 如果没有找到匹配的 label，返回 null 或其他表示未找到的值  
  return null;  
} 
//ab选择 N
const abItems = ref([{
  name:"综合",
  selected: true
},{
  name:"东(南)",
  selected: false
},{
  name:"西(北)",
  selected: false
}]);
const areaid = ref(null)
const abClick = function (selectIndex){
  abItems.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
  if(selectIndex === 0){
    areaid.value = null
    areacode.value = null
  }
  else if(selectIndex === 1){
    areaid.value = 1177350
    areacode.value='01'
  }
  else if(selectIndex === 2){
    areaid.value = 1177351
    areacode.value='02'
  }
  //切换分区刷新数据
  refreshData()
}
const dmyItems = ref([{
  name:"年", 
  selected: false
},{
  name:"月",
  selected: true
}
// ,{
//   name:"日",
//   selected: true
// }
]);
const dmyType = ref('day') 
const dmyClick = function (selectIndex){
  dmyItems.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
  if(selectIndex === 0){
    dmyType.value = 'year'
  }
  else if(selectIndex === 1){
    dmyType.value = 'month'
  }
  else if(selectIndex === 2){
    dmyType.value = 'day'
  }
  //切换分区刷新数据
  refreshData()
}
//////

let ysydlChart,znzmydlChart,ydsdfyOpChart,clklnhChart;
onMounted(()=>{
  ysydlChart = drawLine(ysydlRef.value, ysydlOpt.value);
  znzmydlChart  = drawLine(znzmydlRef.value, znzmydlOpt.value);
  ydsdfyOpChart = drawLine(ydsdfyRef.value, ydsdfyOp.value)
  clklnhChart = drawLine(clklnhRef.value,clklnhOpt.value);
  initMap()
  znzmydlChange();
  refreshData()
  intervalRefreshData()
})
let timer = null
// 5分钟刷新
const refreshData = () => {
    getYesterdayData()
    // await getAmount();
    // await getLeft1Data()
    // await getMainData()
    getBaseDataYearOrMonth()
    getHardWareData()
    getWtElctTop10()
    getZnzmydl() 
    // getTops()
    getAmount()
    getYdsdf()
    getClklnh()
}
const intervalRefreshData = () => {
  timer = setInterval(async () => {
    refreshData()
  }, 300000)
}

///
const hardWare = reactive({
  w_count: 0,
  w_onlines: 0,
  w_offlines: 0,
  w_arrears: 0,
  e_count: 10,
  e_onlines: 0,
  e_offlines: 0,
  e_arrears: 0
})
async function getHardWareData() {
  const params = {}
  params.compid = getCurCompid()
  params.areaid = getCurAreaId()
  hardWare.w_count = 0
  hardWare.w_onlines = 0
  hardWare.w_offlines =  0
  hardWare.w_arrears =  0
  hardWare.e_count = 0
  hardWare.e_onlines = 0
  hardWare.e_offlines = 0
  hardWare.e_arrears = 0
  ajaxRequest('post', 'getHardWareData', params).then(res => {
    if (res.data && res.data.length > 0) {
      res.data.forEach(function (item) {
        if (item.type == 0) {//水
          hardWare.w_count = item.count ?? 0;
          hardWare.w_onlines = item.onlines ?? 0;
          hardWare.w_offlines = item.offlines ?? 0
          hardWare.w_arrears = item.arrears ?? 0
        }else if (item.type == 1) {// 电
          hardWare.e_count = item.count ?? 0;
          hardWare.e_onlines = item.onlines ?? 0;
          hardWare.e_offlines = item.offlines ?? 0
          hardWare.e_arrears = item.arrears ?? 0
        }
      });
    }
  })
}
const yesterday = reactive({
  total: 0,
  w_value: 0,
  e_value: 0,
  w_amount: 0,
  e_amount: 10
})
async function getYesterdayData() {
  const params = {}
  params.compid = getCurCompid()
  params.areaid = getCurAreaId()
  ajaxRequest('post', 'getYesterdayData', params).then(res => {
    if (res.data && res.data.length > 0) {
      res.data.forEach(function (item) {
        yesterday.total = item.total ?? 0;
        yesterday.w_value = item.w_value ?? 0;
        yesterday.e_value = item.e_value ?? 0;
        yesterday.w_amount = (item.w_amount / 10000).toFixed(4) ?? 0;
        yesterday.e_amount = (item.e_amount / 10000).toFixed(4) ?? 0
      });
    }
  })
}

const baseInfo = reactive({
  comp_total: 0,
  w_amount: 0,
  e_amount: 0,
  w_balance: 0,
  e_balance: 0
})
async function getBaseDataYearOrMonth() {
  let params = {
    dateType: dmyType.value
  }
  params.compid = getCurCompid()
  params.areaid = getCurAreaId()
  ajaxRequest('post', 'getBaseDataYearOrMonth', params).then(res => {
    if (res.data) {
      let item = res.data
      baseInfo.comp_total = item.comp_total ?? 0;
      baseInfo.w_amount = (item.w_amount / 10000).toFixed(4)  ?? 0;
      baseInfo.e_amount = (item.e_amount / 10000).toFixed(4)  ?? 0;
      if (item.w_balance > 0) {
        baseInfo.w_balance = 0;
      } else {
        baseInfo.w_balance = (item.w_balance / 10000).toFixed(4) ?? 0;
      }
      if (item.e_balance > 0) {
        baseInfo.e_balance = 0;
      } else {
        baseInfo.e_balance = (item.e_balance / 10000).toFixed(4) ?? 0
      }
    }
  })
}

async function getTops() {

  let params = {
    dateType: 'year',
    energyType: 'water'
  }
  
  fwqnhphTab.value.forEach((row,index)=>{
    if(row.clazz=='selected'){
      if(row.title=='用水'){
        params.energyType='water'
      }else{
        params.energyType='electric'
      }
    }
  });
  params.dateType = dmyType.value
  params.compid = getCurCompid()
  params.areaid = getCurAreaId()
  ajaxRequest('post', 'getTops', params).then(res => {
    if (res.data && res.data.length > 0) {
      fwqnhphItem.value.forEach(function (elem, index, array) {
        if(index<res.data.length){
          if (params.energyType == 'electric') {// 电(item.w_balance / 10000).toFixed(4) ?? 0
            elem.cnt = res.data[index].amount==0?'0':((res.data[index].amount / 10000).toFixed(2) + '')
            elem.ws = res.data[index].value + 'kwh'
          } else {
            elem.cnt = res.data[index].amount==0?'0':((res.data[index].amount / 10000).toFixed(2) + '')
            elem.ws = res.data[index].value + '吨'
          }
          elem.fwq = res.data[index].compname
          elem.zb = calculateBarLength(res.data[index].value, res.data[0].value)+'%' 
          console.info(elem.zb)
        }
      })
    }
  })
}
function calculateBarLength(value, maxValue, maxLength = 100) {
  // 计算当前值占最大值的比例
  let ratio = value / maxValue;
  // 将比例映射到0到maxLength的范围内
  let length = Math.round(ratio * maxLength);
  // 如果长度为0但值不为0（为了避免浮点数精度问题导致的0），则至少给1像素
  if (length === 0 && value !== 0) {
    length = 5;
  }
  return length;
}

async function getAmount() {
  const params = {}
  params.compid = getCurCompid()
  params.areaid = getCurAreaId()
  params.dateType =  dmyType.value
  ajaxRequest('post', 'getAmount', params).then(res => {
    if (res.data && res.data.length > 0) {
      res.data.forEach(function (item) {
        bennianyingshouOptions.value.forEach((row,index)=>{
          if(row.selected==true){
            if(row.name=='电费'){
              currentBennianyingshouOptions.value.num=((item.e_amount / 10000).toFixed(2) ?? 0)+''
              currentBennianyingshouOptions.value.text='电费'
            }else{
              currentBennianyingshouOptions.value.num=((item.w_amount / 10000).toFixed(2) ?? 0)+''
              currentBennianyingshouOptions.value.text='水费'
            }
          }
        });
      });
    }
  })
}
function updateChart(chart, chartOption, data, xAxis) {
  chartOption.value.series[0].data = data.value
  chartOption.value.xAxis[0].data = xAxis.value
  chart.setOption(chartOption.value)
}
function getCurrentMonthDaysArray() {
    // 获取当前日期
    const now = new Date();
    // 获取当前年份
    const year = now.getFullYear();
    // 获取当前月份，注意月份是从0开始的，所以要+1
    const month = now.getMonth() + 1;
    // 获取指定年份和月份的天数
    // 注意Date对象的第二个参数是月份（0-11），第三个参数是日期（1-31）
    // 创建一个指定月份的第一天，然后将日期设置为下个月的第一天，再减去1天即可得到当月的天数
    const daysInMonth = new Date(year, month, 0).getDate();
    // 创建一个长度为当前月份天数的数组，所有元素初始化为0
    const daysArray = Array.from({ length: daysInMonth }, () => 0);
    return daysArray;
}
function getMonthCn(){
  return ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
function getDaysCn(){
  let days = getCurrentMonthDaysArray()
  let daysCn=[]
  for (let index = 0; index < days.length; index++) {
    daysCn.push((index+1)+'日')
  }
  return daysCn
}
async function getWtElctTop10(){
  // if(dmyType.value=='month'){
  //   getCurrentMonthWtElctNew()
  // }else if(dmyType.value=='year'){
  //   getCurrentYearWtElctNew()
  // }else{
  //   getCurrentMonthWtElctNew()
  // }
  const params = {
    type: '水费',
    dateType: dmyType.value
  }
  ysydTab.value.forEach((row,index)=>{
    if(row.clazz=='selected'){
      if(row.title=='用水'){
        params.type='水费'
      }else{
        params.type='电费'
      }
    }
  });
  ysydl_x.value = [
  '肃宁服务区（东西区）',
  '赵县服务区（东西区）',
  '香河服务区（南北区）',
  '辛集服务区（南北区）',
  '石家庄南服务区（南北区）',
  '吴桥服务区（东西区）',
  '大名服务区（东西区）',
  '石家庄东服务区（东西区）',
  '沙河服务区（东西区）',
  '漳河服务区（东西区）'
  ];
  ajaxRequest('post', 'getWtElctTop10', params).then(res => {
    ysydl_y.value = [];
    if (res.data && res.data.length > 0) {
      for (let index = 0; index < res.data.length; index++) {
        ysydl_y.value[index] = res.data[index].cnt
        ysydl_x.value[index] = res.data[index].compname
      }
    }
    ysydlOpt.value.xAxis.data = ysydl_x.value
    ysydlOpt.value.series[0].data = ysydl_y.value
    ysydlChart.setOption(ysydlOpt.value)
  })
}
function getCurCompid(){
  if(curServer.value&&curServer.value.length==2){
    return curServer.value[1]
  }
  return null
}
function getCurAreaId(){
  return areaid.value
}
async function getCurrentMonthWtElctNew() {
  const params = {
    type: 'water'
  }
  ysydTab.value.forEach((row,index)=>{
    if(row.clazz=='selected'){
      if(row.title=='用水'){
        params.type='water'
      }else{
        params.type='electric'
      }
    }
  });
  params.compid = getCurCompid()
  params.areaid = getCurAreaId()
  ysydl_x.value = getDaysCn();
  ajaxRequest('post', 'getCurrentMonthWtElctNew', params).then(res => {
    ysydl_y.value = [];
    if (res.data && res.data.length > 0) {
      res.data.forEach(function (item) {
        ysydl_y.value[item.day - 1] = item.value
      });
    }
    // updateChart(ysydlChart, ysydlOpt, ysydl_y, ysydl_x)
    ysydlOpt.value.series[0].data = ysydl_y.value
    ysydlOpt.value.xAxis[0].data = ysydl_x.value
    ysydlOpt.value.xAxis[0].axisLabel.interval=1
    ysydlChart.setOption(ysydlOpt.value)
  })
}

async function getCurrentYearWtElctNew() {
  const params = {
    type: 'water'
  }
  ysydTab.value.forEach((row,index)=>{
    if(row.clazz=='selected'){
      if(row.title=='用水'){
        params.type='water'
      }else{
        params.type='electric'
      }
    }
  });
  params.compid = getCurCompid()
  params.areaid = getCurAreaId()
  ysydl_x.value = getMonthCn();
  ajaxRequest('post', 'getCurrentYearWtElctNew', params).then(res => {
    ysydl_y.value = [];
    if (res.data && res.data.length > 0) {
      res.data.forEach(function (item) {
        ysydl_y.value[item.month - 1] = item.value
      });
    }
    ysydlOpt.value.series[0].data = ysydl_y.value
    ysydlOpt.value.xAxis[0].data = ysydl_x.value
    ysydlOpt.value.xAxis[0].axisLabel.interval=0
    ysydlChart.setOption(ysydlOpt.value)
  })
}
//智能照明用电量
// const znzmydl_x = ref([])
// const znzmydl_y = ref([]);
async function getZnzmydl() {
  const params = {
    compid:compid,
    areaid : getCurAreaId(),
    dateType:dmyType.value
  }
  if(dmyType.value=='month'||dmyType.value=='day'){
    znzmydl_x.value = getDaysCn()
  }else{
    znzmydl_x.value = getMonthCn()
  }
  ajaxRequest('post', 'getZnzmydl', params).then(res => {
    znzmydl_y.value = [];
    if (res.data && res.data.length > 0) {
      for (let index = 0; index < res.data.length; index++) {
        const item = res.data[index];
        znzmydl_y.value[item.intervalstart]=item.value
      }
    }
    znzmydlOpt.value.xAxis[0].data = znzmydl_x.value
    znzmydlOpt.value.series[0].data = znzmydl_y.value
    if(dmyType.value=='year'){
      znzmydlOpt.value.xAxis[0].axisLabel.interval=0
    }else{
      znzmydlOpt.value.xAxis[0].axisLabel.interval=1
    }
    znzmydlChart.setOption(znzmydlOpt.value)
  })
}
function generateCurrentMonthDaysArray() {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth(); // 注意 getMonth() 返回 0-11
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  const daysArray = Array.from({ length: daysInMonth }, (_, i) => {
    return `${i + 1}号`;
  });

  return daysArray;
}

//年度水电费用start
const ydsdfyRef = ref();
const ydsdfyXAxis = ref(getMonthCn());
const ydsdfyData1 = ref([]);
const ydsdfyData2 = ref([]);
const ydsdfyData3 = ref([]);
const ydsdfyData4 = ref([]);
ydsdfyXAxis.value.forEach(a => {
  ydsdfyData1.value.push(parseInt(Math.random() * 1000 + 1));
  ydsdfyData2.value.push(parseInt(Math.random() * 100000 + 1));
  ydsdfyData3.value.push(parseInt(Math.random() * 1000 + 1));
  ydsdfyData4.value.push(parseInt(Math.random() * 100000 + 1));
})


const ydsdfyOp = ref({
  legend: {
    data: ['上年用水', '上年用电','本年用水', '本年用电'],
    right: "20",
    top: "18",
    icon: "rect",
    itemHeight: 10,
    itemWidth: 10,
    textStyle: {
      color: '#FFFFFF'
    }
  },
  tooltip: {
    trigger: 'axis',
    showDelay: 1,
    axisPointer: {
      type: 'shadow',
      shadowStyle: {
        color: 'rgba(0,145,255,0.55)',
        width: 1
      }
    },
    borderWidth: 0,
    textStyle: {
      fontWeight: 'normal',
      fontSize: 13
    },
    padding: [10, 15],
    formatter: function (param) {
      // console.log(param)
      var text = param[0].axisValueLabel;
      param.forEach(item => {
        if (item.seriesName && item.value) {
          text += "<br>"+item.seriesName+"：" + item.value+"万元"
        }
      })
      return text;
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(193,228,255,0.31)'
      }
    },
    axisLabel: {
      interval: 1,
      color: '#FFF',
      fontSize: 10
    },
    data: ydsdfyXAxis.value
  },
  yAxis: [
    {
      type: 'value',
      name: "单位：万元",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,15]
      },
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed',
        }
      },
    },
    {
      type: 'value',
      // name: "单位：万元",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,-15]
      },
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      splitLine: {
        show:false,
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed',
        }
      },
    }
  ],
  series: [
  // 中间的长方形柱状图(柱状图):bar
  {
    type: 'bar', // 柱状图
    name: '本年用水',
    barWidth: 10, // 柱条的宽度,不设时自适应
    itemStyle: {
      borderRadius: [10, 10, 0, 0], // 这里设置圆角
      color: {
        "x": 0,
        "y": 0,
        "x2": 0,
        "y2": 1,
        "type": "linear",
        "global": false,
        "colorStops": [{
          "offset": 0, // 0%处的颜色
          "color": "#34bac6"
        }, {
          "offset": 1, // 100%处的颜色
          "color": "#72d1d2"
        }]
      }
    },
    data: ydsdfyData1.value,
  },
  // 中间的长方形柱状图(柱状图):bar
  {
    // type: 'bar', // 柱状图
    type: 'line',
    smooth: true,
    name: '本年用电',
    yAxisIndex: 1,
    barWidth: 10, // 柱条的宽度,不设时自适应
    itemStyle: {
      color: {
        "x": 0,
        "y": 0,
        "x2": 0,
        "y2": 1,
        "type": "linear",
        "global": false,
        "colorStops": [{
          "offset": 0, // 0%处的颜色
          "color": "#F62020"
        }, {
          "offset": 1, // 100%处的颜色
          "color": "#FF0000"
        }]
      }
    },
    data: ydsdfyData2.value,
  },

/*******************上一年**************************** */
  // 中间的长方形柱状图(柱状图):bar
  {
    type: 'bar', // 柱状图
    name: '上年用水',
    barWidth: 10, // 柱条的宽度,不设时自适应
    itemStyle: {
      borderRadius: [10, 10, 0, 0], // 这里设置圆角
      color: "#95CA45"
    },
    data: ydsdfyData3.value,
  },
  // 中间的长方形柱状图(柱状图):bar
  {
    type: 'line',
    smooth: true,
    name: '上年用电',
    yAxisIndex: 1,
    barWidth: 10, // 柱条的宽度,不设时自适应
    itemStyle: {
      color: "#FFA500"
    },
    data: ydsdfyData4.value,
  },
  ]
});


//年度水电费用end

/**
 * 获取年度水电费信息,换了位置
 */
async function getYdsdf() {
  ydsdfyData1.value = []
  ydsdfyData2.value = []
  ydsdfyData3.value = []
  ydsdfyData4.value = []
  const params = {
    compid: compid,
    areaid: areaid.value,
    dateType: 'year'
  }

  ydsdfyXAxis.value = getMonthCn()
  ydsdfyOp.value.xAxis.axisLabel.interval=0
  const res = await ajaxRequest('post', 'getYdsdfxxZhkb', params)
  if (res.data) {
    res.data.forEach(item => {
      if (item.flprjexp == "水费") {
        if (item.type == "thisyear") {
          ydsdfyData1.value[parseInt(item.day)-1] = item.cnt ?? 0;
        } else {
          ydsdfyData3.value[parseInt(item.day)-1] = item.cnt ?? 0;
        }
      } else if (item.flprjexp == "电费") {
        if (item.type == "thisyear") {
          ydsdfyData2.value[parseInt(item.day)-1] = item.cnt ?? 0;
        } else {
          ydsdfyData4.value[parseInt(item.day)-1] = item.cnt ?? 0;
        }
      }
    });
  }
  ydsdfyOp.value.series[0].data = ydsdfyData1.value
  ydsdfyOp.value.series[1].data = ydsdfyData2.value
  ydsdfyOp.value.series[2].data = ydsdfyData3.value
  ydsdfyOp.value.series[3].data = ydsdfyData4.value
  ydsdfyOp.value.xAxis.data  = ydsdfyXAxis.value
  ydsdfyOpChart.setOption(ydsdfyOp.value)
}

function getSelectedNames() {
  // 使用filter方法过滤出所有selected为true的对象
  const selectedItems = abItems.value.filter(item => item.selected);

  // 使用map方法提取每个对象的name属性
  const selectedNames = selectedItems.map(item => item.name);
  if(selectedNames[0]=='东(南)'){
    return '01'
  }
  if(selectedNames[0]=='西(北)'){
    return '02'
  }
  return '';
}

////
/****************************地图相关代码start************************************* */
/**初始化地图数据**/
const mapData = ref({
      showLabel:false,
      data : [
        {
          title: "承德东服务区（南北区）",
          lng: 118.192523,
          lag: 41.055226,
          item: 1,
          symbol: black_coffic,
          label: '拥堵'
        },
        {
          title: "丰润停车区（南北区）",
          lng: 118.190801,
          lag: 39.802433,
          item: 11234,
          symbol: black_grey,
          label: '繁忙'
        },
        {
          title: "安子岭服务区（南北区）",
          lng: 117.483534,
          lag: 40.853385,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        },
        {
          title: "滦州服务区（南北区）",
          lng: 118.413204,
          lag: 39.852281,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        }
        ,
        {
          title: "山海关服务区（南北区）",
          lng: 119.762079,
          lag: 40.031636,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        }
        ,
        {
          title: "卢龙服务区（南北区）",
          lng: 118.904135,
          lag: 39.923276,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        }
      ]
    }
)
async function initMap() {
  mapData.value.data = []
  const params = {
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getCompData', params)
  if (res.data && res.data.length > 0) {
    res.data.forEach((item,index) => {
      let lab
      let symb
      if (item.status == 1) {
        lab = "关闭"
        symb = black_symbol
      } else if (item.bhd >= 100) {
        lab = "拥堵"
        symb = black_coffic
      } else if (item.bhd >= 80) {
        lab = "繁忙"
        symb = black_grey
      } else {
        lab = "空闲"
        symb = black_green
      }

      mapData.value.data[index] = {
        compid:item.id,
        title : item.compname,
        lng : item.longitude,
        lag : item.latitude,
        symbol : symb,
        label : lab
      };
    })
  }

};
const clklnh_legend = ref([`车流`, `客流`, `水费`,'电费']);
const clklnh_x = ref([])
const clklnh_y_1 = ref([])
const clklnh_y_2 = ref([])
const clklnh_y_3 = ref([])
const clklnh_y_4 = ref([112,225,33])
for (let i = 1;i<=12;i++){
  clklnh_x.value.push(i+'月');
}
const clklnhRef = ref();
const clklnhOpt = ref({
  color: ['#5AFFFA','#0DA7E5', '#F44538', '#95CA45'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: clklnh_legend,
    right: '3%',
    top: '8%',
    textStyle:{
      color: '#FFFFFF'
    },
    icon:'rect',
    itemWidth: 18,
    itemHeight: 6
  },
  grid: {
    top: '35%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: clklnh_x.value,
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      axisTick:{
        show: false
      },
      axisLabel: {
        interval:0,
        rotate: 0,
        textStyle: {
          color: 'white',
          fontSize: 12
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: "单位：辆/人次",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,15]
      },
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed',
        }
      },
    },
    {
      type: 'value',
      name: "单位：万元",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,-15]
      },
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      splitLine: {
        show:false,
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed',
        }
      },
    }
  ],
  series: [
   {
      yAxisIndex: 0,
      name: clklnh_legend.value[0],
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 3
      },
      showSymbol: true,
      emphasis: {
        focus: 'series'
      },
      data: clklnh_y_1.value
    },
    {
      yAxisIndex: 0,
      name: clklnh_legend.value[1],
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 3
      },
      showSymbol: true,
      emphasis: {
        focus: 'series'
      },
      data: clklnh_y_2.value
    },
    {
      yAxisIndex: 1,
      name: clklnh_legend.value[2],
      type: 'bar',
      barWidth: 10,
      smooth: true,
      lineStyle: {
        width: 3
      },
      stack: 'one',
      showSymbol: true,
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(95,255,0,0.8)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236, 0.1)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: clklnh_y_3.value
    },
    {
      yAxisIndex: 1,
      name: clklnh_legend.value[3],
      type: 'bar',
      barWidth: 10,
      smooth: true,
      stack: 'one',
      lineStyle: {
        width: 3
      },
      showSymbol: true,
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(149,202,69,0.8)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236, 0.1)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: clklnh_y_4.value
    }

  ]
});
async function getClklnh() {

  const params = {
    compid: compid,
    areaid: areaid.value,
    dateType: 'year'
  }
  // if(dmyType.value=='month'||dmyType.value=='day'){
  //   clklnh_x.value = getDaysCn()
  //   clklnhOpt.value.xAxis[0].axisLabel.interval=1
  // }else{
    clklnh_x.value = getMonthCn()
    clklnhOpt.value.xAxis[0].axisLabel.interval=0
  // }
  const result = await ajaxRequest('post', 'getClklnh', params)
  clklnh_y_1.value = []
  clklnh_y_2.value = []
  clklnh_y_3.value = []
  clklnh_y_4.value = []
  if (result.data) {
    result.data.cls.forEach((item,index)=>{
      clklnh_y_1.value[parseInt(item.idx)-1] = item.count
    })
    result.data.kls.forEach((item,index)=>{
      clklnh_y_2.value[parseInt(item.idx)-1] = item.count
    })
    result.data.sfs.forEach((item,index)=>{
      clklnh_y_3.value[parseInt(item.idx)-1] = item.count
    })
    result.data.dfs.forEach((item,index)=>{
      clklnh_y_4.value[parseInt(item.idx)-1] = item.count
    })
  }
  clklnhOpt.value.xAxis[0].data = clklnh_x.value
  clklnhOpt.value.series[0].data = clklnh_y_1.value
  clklnhOpt.value.series[1].data = clklnh_y_2.value
  clklnhOpt.value.series[2].data = clklnh_y_3.value
  clklnhOpt.value.series[3].data = clklnh_y_4.value
  clklnhChart.setOption(clklnhOpt.value)

}

//地图选中服务区
const parenHandler = function (item) {
  curServer.value=['河北高速燕赵驿行集团有限公司',item.compid]
  //刷新数据
  compid=item.compid
  refreshData()
}
/****************************地图相关代码end************************************* */
</script>
<style scoped>
.elsie-items-box{
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  .elsie-items {
    display: flex;
    .elsie-item {
      width: 33.33%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      .elsie-img-center {
        display: flex;
        justify-content: center;
      }
      .elsie-water {
        background: url("../assets/img/erengy/水费.png") no-repeat;
        height: 37px;
        width: 37px;
      }
      .elsie-bridge {
        background: url("../assets/img/erengy/电费.png") no-repeat;
        height: 37px;
        width: 37px;
      }
      .elsie-water-l {
        background: url("../assets/img/erengy/用水量.png") no-repeat;
        height: 42px;
        width: 37px;
      }
      .elsie-bridge-l {
        background: url("../assets/img/erengy/用电量.png") no-repeat;
        height: 42px;
        width: 37px;
      }
      .elsie-eler-o{
        background: url("../assets/img/erengy/电表设备.png") no-repeat;
        height: 62px;
        width: 76px;
      }
      .elsie-water-o{
        background: url("../assets/img/erengy/水表设备.png") no-repeat;
        height: 62px;
        width: 76px;
      }
      .elsie-item-num {
        font-size: 21px;

        span {
          font-size: 12px;
          padding-left: 2px;
        }
      }

      .elsie-item-text {
        font-size: 14px;
      }
    }
  }
}
.elsie-items-box-4{
  .elsie-item {
    width: 25% !important;
  }
}
.elsie-items-box-5{
  .elsie-item{
    width: 20% !important;
    text-align: center;
    position: relative;
    .dot{
      bottom: 15px;
      left:10px;
      position: absolute;
      display: block;
      width: 5px;
      height: 5px;
      border-radius: 5px;
      background: gray;
    }
    .green{
      background: green;
    }
    .yellow{
      background: yellow;
    }
    .red{
      background: red;
    }
  }
}
.elsie-search{
  z-index: 100;
  position: absolute;
  right: 10px;
  display: flex;
  top: 16px;
  .elsie-search-type{
    display: flex;
    margin-right: 12px;
    .elsie-search-item{
      margin-right: 12px;
      cursor: pointer;
      padding: 5px;
    }
    .selected{
      border-bottom: 1px solid #35CB9C;
      color: #35CB9C;
    }
  }
  .elsie-search-type2{
    display: flex;
    margin-right: 12px;
    .elsie-search-item{
      cursor: pointer;
      background: #0A3E47;
      div{
        padding: 5px 10px;
      }
    }
    .selected{
      background: #35CB9C;
      color: white;
      border-radius: 5px;
    }
  }
}
.process-parent{
  left: 14vh !important;
}
.yz-process-items {
    & .yz-process-item {
        & .process-parent {
            position: absolute;
            top: 1vh;
            left: 12vh;
            right: 1vh;
            padding-right: 10.5vh;
            padding-left: 11.5vh;
            .rate {
                position: absolute;
                right: -2.2vh;
                top: -1vh;
            }
        }
    }
}
/* .yz-select-server {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1vh;
    margin-top: -1vh;
} */
.yz-box-items {
    margin-top: 3px;
    display: flex;
    box-shadow: inset 0 0 18px 1px rgba(0, 255, 255, 0.59);
    height: 3vh;
}
.elsie-items-box-4-1{
  .elsie-item{
    width: 25% !important;
    text-align: center;
    position: relative;
    .dot{
      bottom: 15px;
      left:10px;
      position: absolute;
      display: block;
      width: 5px;
      height: 5px;
      border-radius: 5px;
      background: gray;
    }
    .green{
      background: green;
    }
    .yellow{
      background: yellow;
    }
    .red{
      background: red;
    }
  }
}

/* .elsie-items-box-4-1 .elsie-items .elsie-item .elsie-item-num {
  font-size: 22px !important;
}

.elsie-items-box-4-1 .elsie-items .elsie-item .elsie-item-num span {
  font-size: 12px !important;
  padding-left: 2px !important;
}

.elsie-items-box-4-1 .elsie-items .elsie-item .elsie-item-text {
  font-size: 15px !important;
} */
</style>
